<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer"/>
    <script type="text/javascript" src="./js/jquery-3.1.1.js"></script>
    <link rel="stylesheet" href="/css/novelinfo.css"/>
    <title>小说详情页</title>
    <style>
    </style>
</head>
<body>
<div class="novel-container">
    <img class="novel-poster" src="https://www.shu18.cc/images/42/42817/42817s.jpg"
         alt="电影海报">
    <div class="novel-info">
        <h1 class="novel-title">小说名</h1>
        <p class="novel-description">小说简介...</p>
        <div class="novel-details">
            <span>作者:<span id="director">唐三</span></span><br><br>
            <span>类型: <span id="type">类型: 小说类型</span></span><br><br>
            <span>状态: <span id="status">状态: 小说状态</span></span><br><br>
            <span>字数: <span id="count">字数：500万字</span></span><br><br>
        </div>
        <!-- 添加加入书单和立即阅读按钮 -->
        <br>
        <button class="add-to-cart">加入书架</button>
        <button class="read-now">立即阅读</button>
    </div>
    <div class="novel-content">
        <h2>目录</h2>
        <ul>
        <!--目录数据-->
            <li class="novel_p"><a  href="">1</a></li><br>
            <li class="novel_p"><a  href="">1</a></li><br>
            <li class="novel_p"><a  href="">1</a></li><br>
            <li class="novel_p"><a  href="">1</a></li><br>
            <li class="novel_p"><a  href="">1</a></li><br>
            <li class="novel_p"><a  href="">1</a></li><br>
            <li class="novel_p"><a  href="">1</a></li><br>
            <li class="novel_p"><a  href="">1</a></li><br>
            <li class="novel_p"><a  href="">1</a></li><br>
            <li class="novel_p"><a  href="">1</a></li><br>
        </ul>
    </div>
</div>

<div class="trailer-modal" style="display:none;">
    <div class="trailer-video">
        <button class="close-trailer">关闭</button>
        <iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

<!-- 页面底部的评论区 -->
<div class="comments-container">
    <h2>评论区</h2>
    <!-- 评论列表 -->
    <div class="comments-list">
        <h3>用户评论</h3>
        <!-- 评论项示例 -->
        <table class="comment">

        </table>
        <!-- 更多评论项可以动态添加 -->
    </div>
    <!-- 提交评论的表单 -->
    <div class="comment-form">
        <h3>留下你的评论</h3>
        <div class="form-group">
            <label for="comment">评论:</label>
            <textarea id="comment" name="comment" required></textarea>
        </div>
        <button onclick="addBComment()">提交评论</button>
    </div>
</div>

</body>
<script>
    // 获取当前小说id
    var bid = sessionStorage.getItem("bid")

    // 入口函数
    $(document).ready(function () {
        // 初始化详情数据
        shownovel(bid);
        shownovelP(bid);
        // 初始化书单绑定事件
        bookCar();
        // 加载初始评论数据
        showComment();
    });


    // 绑定点击事件到加入书单按钮
    function bookCar() {
        $('.add-to-cart').click(function () {
            // 判断用户是否登录
            $.get("http://localhost:8080/getUser", null, function (data) {
                console.log(data);
                if (data === "") {
                    alert("请先登录！")
                    window.location.href = "login.html";
                } else {
                    let bid = sessionStorage.getItem("bid")
                    let username = data.username;
                    $.get("http://localhost:8080/addBookCar", {"bId": bid, "username": username,}, function (data) {
                        console.log(data)
                        if (data === "添加成功" || "修改成功") {
                            alert('已添加到书单！');
                        } else {
                            alert('添加失败！');
                        }
                    })
                }
            });
        });
    }

    // 渲染详情数据
    function shownovel(bid) {
        $.get("http://localhost:8080/getBookById", {"bId": bid}, function (data) {
            console.log(data)
            $(".novel-title").text(data.bname)
            $(".novel-poster").attr("src", data.bimg)
            $(".novel-description").text(data.bcontent)
            $("#director").text(data.bauthor)
            $("#type").text(data.btype)
            $("#status").text(data.bstatus)
            $("#count").text(data.bcount)

        })
    }

    // 加载目录数据
    function shownovelP(){
        $.get("http://localhost:8080/getDetailsById",{"bId": bid}, function (data){
            console.log(data)
            for (let i = 0; i < data.length; i++) {
                $(".novel-content li a").eq(i).text(data[i].chapterName)
                $(".novel-content li a").eq(i).attr("href",data[i].chapterA)
            }
            // 绑定点击事件到立即阅读按钮
            $('.read-now').click(function () {
                location.href = data[0].chapterA
            });

        })
    }


    // 添加评论
    function addBComment() {
        $.get("http://localhost:8080/getUser", null, function (data) {
            console.log(data);
            if (data === "") {
                alert("请先登录！")
                window.location.href = "login.html";
            } else {
                var content = $("#comment").val();
                if (content == null || content.trim() === "") {
                    alert("评论为空");
                } else {
                    var ctime = new Date();
                    var ptime = ctime.toLocaleString();
                    var username = data.username;
                    var BookCommentData = {
                        "username": username,
                        "bId": bid,
                        "content": content,
                        "pTime": ptime
                    }
                    $.get("http://localhost:8080/addBComment", BookCommentData, function (data) {
                        // alert(data);
                        // 发送评论后清空
                        $('#comment').val('');
                        //显示评论
                        showComment()
                    })
                }
            }
        });
    }

    // 显示评论
    function showComment() {
        var data = {
            "bId": bid
        }
        $.get("http://localhost:8080/showBComment", data, function (res) {
            console.log(res)
            $(".comment").empty()
            for (var i = 0; i < res.length; i++) {
                $(".comment").append(
                    '<tr>' +
                        '<td>' +
                            '<div class="comment-img"><img src="' + /userimg/+res[i].userimg + '"></div>' +
                        '</td>' +
                        ' <td>' +
                            '<h4>' + res[i].nikename + '&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment-ptime">' + res[i].ptime + '</span></h4>' +
                            '<div class="comment-body">' + res[i].content + '</div>' +
                            '<hr>' +
                        "</td>" +
                    '</tr>'
                );
            }

        })
    }

</script>
</html>